<template>
    <div>
        <basic-layout title="食堂评价" :showFilterBtn="true" @handleAdd="handleAdd"
            @handleFilter="$refs.queryPopupRef.show = true">
            <div class="columnFlex">
                <!-- 列表 -->
                <van-row class="listCon">
                    <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
                        <van-list v-model="loading" :finished="finished" :finished-text="listData.length ? '没有更多了' : ''"
                            @load="onLoad">
                            <van-swipe-cell v-for="val in listData" :key="val.mealticketId">
                                <div class="cellContent">
                                    <div class="top">
                                        <div class="imgBox">
                                            <img :src="userUrlObj[val.scoreUserFileCode] || 'images/convaccess/people.svg'">
                                            <div>{{ val.scoreUser }}</div>
                                            <!-- <p class="title">{{ val.scoreUser }}</p> -->
                                        </div>
                                        <div class="flex">
                                            <p class="rate">
                                                评价时间：
                                                {{val.commentTime }}
                                            </p>
                                        </div>
                                        <div class="flex">
                                            <p class="rate">
                                                服务态度：
                                                <van-rate color="#ec9c33" v-model="val.serviceAttitudeScore*1"
                                                    readonly />
                                            </p>
                                        </div>
                                        <div class="flex">
                                            <p class="rate">
                                                环境卫生：
                                                <van-rate color="#ec9c33" v-model="val.environmentHygieneScore*1"
                                                    readonly />
                                            </p>
                                        </div>
                                        <div class="flex">
                                            <p>
                                                <span class="label">评价:</span>
                                                <span>{{ val.scoreComment }}</span>
                                            </p>
                                        </div>
                                        <!-- <div class="flex fle" style="display: flex;">
                                            
                                        </div> -->
                                        <div class="fle">
                                            <div v-for="item1 in fileUrlObj[val.scoreId]" class="imgDiv">
                                                <img :src="item1|| (loading ? 'images/loading.gif' : 'images/noImgData.png')">
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </van-swipe-cell>
                        </van-list>
                        <van-empty v-if="!loading && !listData.length" class="custom-image"
                            :image="require('../../../../assets/images/empty.png')" description="暂无数据" />
                    </van-pull-refresh>
                </van-row>
            </div>
        </basic-layout>
        <!-- 筛选条件弹出框 -->
        <queryPopup ref="queryPopupRef" @handleSearch="onRefresh" @handleReset="handleReset">
            <van-form class="filterBox">
                <label>食堂列表</label>
                <van-field>
                    <template #input>
                        <div class="textCon" @click="showPicker = true">
                            <span v-if="!canteenText" style="color: #aaa">请选择食堂列表</span>
                            <span v-else>{{ canteenText }}</span>
                        </div>
                    </template>
                </van-field>
                <label>评价日期</label>
                <van-field>
                    <template #input>
                        <div class="textCon" @click="showStatusDatePicker = true">
                            <span v-if="!mealticketApplyDateText" style="color: #aaa">请选择评价日期</span>
                            <span v-else>{{ mealticketApplyDateText }}</span>
                        </div>
                    </template>
                </van-field>
                <!-- <label>只看自己</label>
                <van-checkbox v-model="checked" @change="onlyYou"></van-checkbox> -->
            </van-form>
        </queryPopup>
        <!-- 预定日期 -->
        <van-calendar v-model="showStatusDatePicker" :allow-same-day="true" :min-date="getMin()" :max-date="getMax()" type="range"
            @confirm="onTimeConfirm" />
        <!-- 食堂列表选择 -->
        <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="canteenList" @select="onConfirm" />
        <!-- 新增/详情/编辑 弹出框 -->
        <fullscreenModal :modal="fullscreenModal" :isAdd="isAdd" label="食堂评价" :isShowEdit="isShowEdit"
            :editType="editType" @handleClose="fullscreenModal = false" @handleEdit="handleEdit"
             @handleCancel="editType = 'detail'" @handleSave="$refs.editFormRef.handleSave()">
            <detail v-show="editType == 'detail'" ref="detailRef"></detail>
            <edit-form v-show="editType == 'edit'" @close="fullscreenModal = false" @refresh="onRefresh"
                ref="editFormRef" />
        </fullscreenModal>
        <full-loading v-if="fullLoading"></full-loading>
        <!-- 二维码 -->
    </div>
</template>

<script>
    import { queryFileList } from '@/api/common';
    import { getCanteenInfoByLoginUser } from '@/api/srvAssurance/smarcatering/oneWeekMenu';
    import { getPage, editScore } from '@/api/srvAssurance/smarcatering/canteenScore';
    import editForm from "./editForm.vue";
    export default {
        components: {
            editForm,
        },
        data() {
            return {
                isShowEdit: false,
                fullscreenConsoleModal: false,
                showStatusDatePicker: false,
                loading: false,
                fullLoading: false,
                refreshLoading: false,
                fullscreenModal: false,
                showPicker: false,
                finished: false,
                formData: {
                    canteenId: '',
                    startTime: '',
                    endTime: '',
                    pageNum: 1,
                    pageSize: 20,
                    isNot: '0'
                },
                canteenText: "",
                statusText: "",
                mealticketApplyDateText: '',
                listData: [], // 列表数据
                canteenList: [], // 食堂列表
                isAdd: false,
                editType: "",
                cancelFormData: {
                    bookeId: '', // 取消标识
                    cancelReason: '', // 取消原因
                },
                editParam: {},
                checked: false,
                fileUrlObj: {},
                userUrlObj: {},
            };
        },
        mounted() {
            this.queryDicData();
        },
        methods: {
            getDateRange(dateNow, intervalDays, bolPastTime) {
                let oneDayTime = 24 * 60 * 60 * 1000;
                let lastDay;

                if (!bolPastTime) {
                    lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime);
                    return this.formateDate(lastDay);

                } else {
                    lastDay = new Date(dateNow.getTime() + intervalDays * oneDayTime);
                    return this.formateDate(lastDay);

                }
            },
            formateDate(time) {
                let year = time.getFullYear()
                let month = time.getMonth() + 1
                let day = time.getDate()

                if (month < 10) {
                    month = '0' + month
                }

                if (day < 10) {
                    day = '0' + day
                }
                return year + '-' + month + '-' + day + ''
            },
            getMin() {
                return new Date(this.getDateRange(new Date(), 30, false));
            },
            getMax() {
                return new Date(this.getDateRange(new Date(), 30, true));
            },
            onlyYou(val) {
                if (val) {
                    this.formateDate.isNot = '1';
                } else {
                    this.formateDate.isNot = '0';
                }
                this.onRefresh();
            },
            handleEdit() {
                getInfoById(this.editParam.mealticketId)
                    .then((res) => {
                        if (res.code === 1000 && res.data) {
                            this.editType = "edit";
                            this.$refs.editFormRef.resetForm();
                            // this.$refs.editFormRef.getData(this.currentParam);
                            this.$refs.editFormRef.getData({ data: res.data });
                            // this.fullscreenModal = true;

                        }
                    })
                    .catch(() => {

                    });

            },
            // 预定日期选择
            onTimeConfirm(time) {
                const [start, end] = time;
                let startTime = new Date(start).format('yyyy-MM-dd');
                let endTime = new Date(end).format('yyyy-MM-dd');
                this.formData.startTime = startTime;
                this.formData.endTime = endTime;
                this.mealticketApplyDateText = `${startTime} - ${endTime}`;
                this.showStatusDatePicker = false;
                this.onRefresh();
            },
            // 获取表格数据
            getListData() {
                if (!this.formData.canteenId) {
                    this.finished = true;
                    this.loading = false;
                    return;
                }
                this.loading = true;
                let fileCodeArr = {};
                let userCodeObj = [];
                getPage(this.formData).then((res) => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        this.listData = [...this.listData, ...res.data.records];
                        if (this.listData.length >= res.data.total) {
                            this.finished = true;
                        }
                        let flag = false;
                        let flagUrl=false;
                        res.data.records.forEach(item => {
                            if (item.fileCodeList && item.fileCodeList.length > 0 && !this.fileUrlObj[item.scoreId]) {
                                fileCodeArr[item.scoreId] = item.fileCodeList;
                                this.fileUrlObj[item.scoreId] = '';
                                flag = true;
                            }
                            if (item.scoreUserFileCode && !this.userUrlObj[item.scoreUserFileCode]) {
                                userCodeObj.push(item.scoreUserFileCode);
                                this.userUrlObj[item.scoreUserFileCode] = '';
                                flag = true;
                            }
                        })
                        if (flag) {
                            this.queryFileInfoData(fileCodeArr);
                        }
                        if (flag) {
                            this.queryUrlFileInfoData(userCodeObj);
                        }
                       
                    } else {
                        this.finished = true;
                    }
                }).catch(() => {
                    this.loading = false;
                    this.finished = true;
                });
            },
            // 获取图片信息
            queryFileInfoData(fileCodeArr) {
                this.loading = true;
                Object.keys(fileCodeArr).forEach(key => {
                    queryFileList(fileCodeArr[key]).then(res => {
                        if (res.code === 1000 && res.data) {
                            let arr = [];
                            res.data.forEach(item => {
                                arr.push(item.url);
                            })
                            this.fileUrlObj[key] = arr;
                            this.$forceUpdate();
                            // this.loading = false;
                        }
                    }).catch(() => {
                        this.loading = false;
                    })
                })
                this.loading = false;
            },
            queryUrlFileInfoData(fileCodeArr) {
                this.loading = true;
                Object.keys(fileCodeArr).forEach(key => {
                    queryFileList(fileCodeArr).then(res => {
                        if (res.code === 1000 && res.data) {
                            res.data.forEach(item => {
                                this.userUrlObj[item.fileCode] = item.url;
                            })
                            this.$forceUpdate();
                            this.loading = false;
                        }
                    }).catch(() => {
                        this.loading = false;
                    })
                })
                this.loading = false;
            },
            onRefresh() {
                this.refreshLoading = false;
                this.finished = false;
                this.listData = [];
                this.formData.pageNum = 1;
                this.getListData();
            },
            onLoad() {
                this.formData.pageNum++;
                this.getListData();
            },
            // 重置
            handleReset() {
                this.formData = {
                    canteenId: '',
                    startTime: '',
                    endTime: '',
                    pageNum: 1,
                    pageSize: 20,
                    isNot: '0'
                };
                this.checked = false;
                this.fileUrlObj = {};
                if (this.canteenList.length) {
                    this.formData.canteenId = this.canteenList[0].canteenId;
                    this.canteenText = this.canteenList[0].canteenName;
                }
                this.statusText = "";
                this.mealticketApplyDateText = "";
                this.onRefresh();
            },
            // 食堂列表选择
            onConfirm(item) {
                this.formData.canteenId = item.canteenId;
                this.canteenText = item.name;
                this.showPicker = false;
                this.onRefresh();
            },
            // 清空查询条件
            clearPicker() {
                this.formData.mealticketApplyStatus = "";
                this.statusText = "";
                this.mealticketApplyDateText = "";
                this.onRefresh();
            },
            // 新建数据
            handleAdd() {
                if (this.canteenList.length <= 0) {
                    this.$Notify({ type: 'warning', message: '请联系管理员配置食堂信息' });
                    return;
                }
                this.fullscreenModal = true;
                this.editType = "edit";
                this.isAdd = true;
                this.$refs.editFormRef.resetForm();
                this.$refs.editFormRef.getData();
            },

            // 下拉框数据
            queryDicData() {
                // 食堂列表
                getCanteenInfoByLoginUser().then(res => {
                    if (res.code === 1000 && res.data) {
                        res.data.forEach(item => {
                            item.name = item.canteenName;
                        })
                        this.canteenList = res.data;
                        if (this.canteenList.length) {
                            this.formData.canteenId = this.canteenList[0].canteenId;
                            this.canteenText = this.canteenList[0].canteenName;
                            this.onRefresh();
                        }
                        this.$nextTick(() => {
                            this.$refs.editFormRef.canteenList = this.canteenList;
                        })
                    }
                })
            }
        },
    };
</script>

<style scoped lang="less">
    .listCon {
        .cellContent {
            .top {
                padding: 0 10px;
                box-sizing: border-box;

                .imgBox {
                    display: flex;

                    &>div {
                        font-size: 12px;
                        margin-left: 12px;
                    }

                    &>img {
                        width: 25px;
                        height: 25px;
                        border-radius: 50%;
                    }
                }
            }


            .bottom {
                margin-top: 3px;
                padding: 3px 10px 0;
                border-top: 1px solid #eee;
            }

            .btnP {
                color: black;
                font-size: 12px;
                text-align: center;
            }

            .rate {
                font-size: 10px;
            }

            .fle {
                margin-left: 20px;

                .imgDiv {
                    float: left;
                    width: 90px;
                    height: 90px;
                    margin-right: 15px;
                    margin-bottom: 15px;

                    &>img {
                        width: 100%;
                        height: 100%;
                        border-radius: 10px;
                    }
                }
            }

            .btn {
                width: 20px;
                height: 15px;
                font-size: 12px;
                border: none;
            }

            .people {
                color: #bbb;
                font-size: 12px;
            }
        }
    }
</style>